<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{width:100%;height:100%;}
        p{margin-left:5px; font-size:14px;}
        .fa{
            height: 100%;
            width: 100%;
            position: relative;
        }
        .select{
            position:absolute;
            z-index: 2;
            top: 41px;
            left: 10px;
            width: 300px;
            height: 30px;
        }


    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=WQCBZ-FLQCJ-ZKFF5-KTONH-GYQWV-D4BR4"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <title>查看活动地图</title>
</head>
<body>

<!--<form class="well form-inline margin-top-20" method="post" action="{:url('AdminArticle/index')}">-->
    <!--进行中的活动:-->
<div class="fa">
    <select class="select" name="category" >
        <foreach name="act" id="vo">
            <option value='{$vo.id}'>{$vo.title}</option>
        </foreach>
    </select> &nbsp;&nbsp;
    <!--<input type="submit" class="btn btn-primary" value="搜索"/>-->
<!--</form>-->

<div id="allmap"></div>
</div>
</body>
</html>
<script type="text/javascript">

    (function(){
        "use strict";
        var _map;
        function get_info(index) {
            var that=this;
            $.ajax({
                type: "post",
                url: "index",
                data: {index:index},
                dataType: "json",
                success: function(res){

                     var opts = {
                        width : 250,     // 信息窗口宽度
                        height: 80,     // 信息窗口高度
                        title : res.title, // 信息窗口标题
                        enableMessage:true//设置允许信息窗发送短息
                    };
                    var data_info=res.info
                    var p=res.point
                    get_map(data_info,opts,p)
                }
            });
        }
        function bind_events(){
            $('.select').off("change").on("change",function(e){
                e.preventDefault();
                var _id = $(this).val();
                get_info(_id);
            });
        }
        function deploy_marker(_lat,_lng,_text){
            console.log(_lat,_lng,_text);
            var _point = new qq.maps.LatLng(_lat,_lng);
            var marker = new qq.maps.Marker({
                position:_point,
                map: _map
            });
            var infoWin = new qq.maps.InfoWindow({
                map: _map
            });          
            infoWin.setContent('<div style="width:200px;padding-top:10px;">'+_text+'</div>');
            infoWin.setPosition(_point);
            qq.maps.event.addListener(marker,'click',function() {
                infoWin.open();
            });
        }
        // 百度地图API功能
        function get_map(data_info,opts,p) {
            var _p=p.split(",");
            var _lat = _p[1],_lng= _p[0];

            var _center = new qq.maps.LatLng(_lat,_lng);
            _map = new qq.maps.Map(document.getElementById("allmap"), {
                center: _center,
                zoom: 16,
            });

            for(var i=0;i<data_info.length;i++){

                var _marker_lat = data_info[i][0],_marker_lng=data_info[i][1],content = data_info[i][2];
                deploy_marker(_marker_lat,_marker_lng,content);               
            }
        }
    

        $(function(){
             get_info(0);
             bind_events();
        })
    })();


   

    


</script>